<template>
	<view class="page">
	<!-- 	<up-navbar title="红旗老师16区记忆法" @rightClick="{}" :autoBack="true" bgColor="#f1f1f1" placeholder></up-navbar> -->
		<view class="content flex flex-wrap" style="flex-direction: row;">
			<view class="region relative flex-wrap box-sizing" v-for="(item,index) in list" :key="index">
				<view @click="open(item,index,it,i)" :class="it.status == 1?'activeBorder':'defaultBorder'"
					class="wordBox flex width-half column space-between box-sizing" v-for="(it,i) in item" :key="i"
					style="z-index: 9;">
					<view class="flex space-between fontSize-28">
						<view v-if="it.status == 1" class="tag" :class="it.status == 1?'activeBj':'defaultBj'">
							{{it.learn_status==1?'已记':'未记'}}
						</view>
						<view class="flex flex-end" style="color: #888;flex: 1;">
							{{index+'_'+i+'区'}}
						</view>
					</view>
					<view class="flex column box-sizing padding-20 " style="flex: 1;">
						<view class="fontSize-24 text-hidden"
							v-for="(t,k) in it.wordsList&&it.wordsList.length>5?it.wordsList.splice(0,5):it.wordsList"
							:key="k">
							{{parseInt(k)+1}}.{{t.wordHead}}
						</view>
						<view class="marginTop-10 fontSize-26 color-409EFF" v-if="it.wordsList&&it.wordsList.length>5">
							更多
						</view>
					</view>
					<view class="fontSize-28">
						<view class="padding-20 borderRadius-8"
							style="background-color: #a6d2ff;opacity: .6; padding: 10rpx 30rpx; display: inline-block;">
							<span style="color: #ce0404;">{{it.rem_count?it.rem_count:0}}</span>/<span
								style="color: #12822a;">{{it.total_count?it.total_count:0}}</span>
						</view>
					</view>
				</view>
				<view class="absText absolute">
					{{index}}
				</view>
			</view>
			<up-popup :safeAreaInsetBottom="false" mode="center" round="5" :show="phoneShow" @close="close"
				@open="phoneShow = true">
				<view class="popupBox fontSize-28">
					<view class="width-full weight-700 text-center">
						{{pageVal}}
					</view>
					<view class="flex space-between color-696969 marginTop-30">
						<view class="">
							{{acitveData.subscript}}区
						</view>
						<view class="flex">
							<view class="">
								生词：<span style="color: red;">{{acitveData.sheng}}</span>
							</view>
							<view class="marginLeft-20">
								已熟悉词：<span style="color: #12822a;">{{acitveData.rem_count}}</span>
							</view>
						</view>
					</view>
					<view class="flex column marginTop-30">
						<view class="flex items-center space-between height-60" v-for="(it,i) in words" :key="i">
							<view class="fontSize-30 weight-700">
								{{parseInt(i)+1}}.{{it.wordHead}}
							</view>
							<view class="" v-if="it.is_know == 1">
								<up-icon name="checkbox-mark" color="#0ad666" size="24"></up-icon>
							</view>
						</view>
					</view>

					<view class="width-full marginTop-30 box-sizing btns flex column items-center flex-center">
						<view class="">
							{{acitveData.subscript}}区单词请查收
						</view>
						<view class="marginTop-30 flex flex-center column" style="width: 80%;">
							<view class="height-30 width-full"></view>
							<up-button v-if="acitveData.practice_content&&acitveData.practice_content!=''&&isJy==1"
								@click="listShow?toPage():''" :disabled="!listShow" size="normal" type="primary" plain
								text="查看故事"></up-button>
							<up-button v-if="!acitveData.practice_content&&isJy==1||acitveData.practice_content==''&&isJy==1"
								@click="listShow?toPage():''" :disabled="!listShow" size="normal" type="primary" plain
								text="编故事"></up-button>
						</view>
					</view>
				</view>
			</up-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const phoneShow = ref(false);
	const getAreaWordsApi = inject('getAreaWords');
	const getAreaWordsViewApi = inject('getAreaWordsView');
	const acitveData = ref({})
	const words = ref([])

	const list = ref({});
	const page = ref(1);
	const pageVal = ref('');
	const listShow = ref(false)
	const loadShow = ref(true)
	const isJy = ref(1)
	let refData = {}
	onLoad((op) => {
		page.value = op.page;
		pageVal.value = op.pageVal;
		isJy.value = op.isJy?op.isJy:1
		getAreaWords()
	})
	onShow(() => {
		if (!loadShow.value) {
			getAreaWords()
		}
	})
	const getAreaWords = () => {
		getAreaWordsApi({
			page: page.value
		}).then(res => {
			list.value = res.wordList
			loadShow.value = false
		})
	}
	const toPracticeWord = () => {
		let stringData = JSON.stringify({
			...refData,
			editType: 1
		})
		console.log(stringData)
		close();
		uni.navigateTo({
			url: '/pages/index/practiceWord?data=' + JSON.stringify(refData)
		})
	}
	const toPage = () => {
		let stringData = JSON.stringify(refData)
		console.log(stringData)
		close();
		uni.navigateTo({
			url: '/pages/index/practiceWord?data=' + JSON.stringify(refData)
		})
	}
	const toPage2 = () => {
		let stringData = JSON.stringify({
			...refData,
			type: 3
		})
		console.log(stringData)
		close();
		uni.navigateTo({
			url: '/pages/index/rememberWord?data=' + JSON.stringify(refData)
		})
	}
	const close = () => {
		phoneShow.value = false
	}
	const open = (item, index, it, i) => {
		console.log(item, index, it, i, 'ooooojhkjhhj')
		getAreaWordsViewApi({
			page: page.value,
			big_sort: index,
			small_sort: i,
		}).then(res => {
			acitveData.value['subscript'] = index + '_' + i;
			acitveData.value['learn_status'] = it['learn_status'];
			acitveData.value['rem_count'] = res['rem_count'];
			acitveData.value['total_count'] = it['total_count'];
			acitveData.value['sheng'] = res.unrem_count
			acitveData.value['page'] = pageVal.value
			acitveData.value['big_sort'] = it['big_sort'];
			acitveData.value['small_sort'] = it['small_sort'];
			acitveData.value['practice_content'] = it['practice_content'];
			words.value = res.wordList
			acitveData.value['wordList'] = res.wordList
			phoneShow.value = true

			let listData = [];
			if (res.wordList && res.wordList.length > 0) {

				// for (let s of res.wordList) {
				// 	console.log(s,'ssssssssssss')
				// 	if(s.is_know != 1){
				// 		listData = [...listData,s]
				// 	}
				// }
				// if(listData&&listData.length>0){
				refData['subscript'] = index + '_' + i;
				refData['learn_status'] = it['learn_status'];
				refData['rem_count'] = it['rem_count'];
				refData['total_count'] = it['total_count'];
				refData['sheng'] = parseInt(it.total_count) - parseInt(it.rem_count)
				refData['wordList'] = res.wordList
				refData['page'] = page.value
				refData['big_sort'] = it['big_sort'];
				refData['small_sort'] = it['small_sort'];
				refData['practice_content'] = it['practice_content'];
				refData['content'] = refData.practice_content
				listShow.value = true
				// }
			}

		})
		// phoneShow.value = true
	}
</script>

<style lang="scss">
	.region {
		width: 50%;
		display: flex;
		height: 50%;

	}

	.wordBox {
		height: 50%;
		width: 50%;
		// height: calc((100vh - 44px - var(--status-bar-height))/4)
	}

	.activeBorder {
		border: 1rpx dashed #52e449;
	}

	.defaultBorder {
		border: 1rpx dashed #ccc;
	}

	.activeBj {
		background-color: #37a730;
	}

	.defaultBj {
		background-color: #ff5500;
	}

	.tag {
		border-radius: 15rpx;
		padding: 5rpx 10rpx;
		font-size: 22rpx;
		color: #fff;
	}

	.absText {
		font-size: 150rpx;
		color: #c3c3c3;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// width: 100px;
		// height: 100px;
	}

	.popupBox {
		width: 80vw;
		padding: 50rpx 30rpx 30rpx;
		// background-color: #fff;
		// border-radius: 5px;
		box-sizing: border-box;

		.btns {
			// padding-bottom: calc(50rpx);
		}
	}
</style>